<template>
  <div style="display: inline-block;vertical-align: middle;height: 1.5em;">
    <div class="mainDiv" @click="clickCheckBox">
        <svg v-if="!indeterminate && ((value == undefined) || !value)"  class="svg" viewBox="0 0 16 16"><rect x="3" y="3" width="10" height="10" rx="1" ry="1" :fill="disable?'var(--disable-color)':'none'" stroke="var(--primary-color)" stroke-width="0.5"></rect></svg>
        <svg v-else-if="!indeterminate" class="svg"  viewBox="0 0 16 16">
            <rect x="3" y="3" width="10" height="10" rx="1" ry="1" fill="var(--primary-color)" stroke="var(--primary-color)" stroke-width="0.5"></rect>
            <g transform="scale(2.5) translate(1.1,1.1)">
                <path style="color:#000000;fill:white;fill-rule:evenodd;stroke-width:1.37022;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3;" d="M 3.6645543,0.80765299 A 0.26494677,0.26330844 0 0 0 3.2914047,0.83700023 L 1.7129005,2.6885442 C 1.6278253,2.6055351 1.5939662,2.5706948 1.4712929,2.4510983 1.3585531,2.3411862 1.2454151,2.2300979 1.1572028,2.1442864 1.0689905,2.0584748 1.0222885,2.0132774 0.9907618,1.9842105 a 0.26494677,0.26330844 0 0 0 -0.3731497,0.013345 0.26494677,0.26330844 0 0 0 0.0134232,0.3708424 c -0.0125847,-0.011616 0.0650711,0.066514 0.15301774,0.152066 0.087946,0.085552 0.20410658,0.1943025 0.31677456,0.3041445 0.2253357,0.219684 0.4456321,0.4375407 0.4456321,0.4375407 A 0.26497325,0.26333476 0 0 0 1.9330321,3.2434736 L 3.6940842,1.1784952 a 0.26494677,0.26330844 0 0 0 -0.02953,-0.37084221 z" id="path1" />
            </g>
        </svg>
        <svg v-if="indeterminate" class="svg"  viewBox="0 0 16 16">
            <rect x="3" y="3" width="10" height="10" rx="1" ry="1" fill="var(--primary-color)" stroke="var(--primary-color)" stroke-width="0.5"></rect>
            
            <line x1="5" y1="8" x2="11" y2="8"  style="stroke:white;fill:white;fill-rule:evenodd;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:3;s" id="path1" />
        </svg>
        <div class="label" :style="disable?'color:var(--disable-color)':''">{{label}}</div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
        }
    },
    props: {
        value:{type:Boolean, default: false},
        label:{
            type: String,
            default: ''
        },
        disable:{
            type: Boolean,
            default: false
        },
        indeterminate:{
            type: Boolean,
            default: false
        }
        
    },
    mounted(){
        this.isChecked = this.value;
    },
    methods: {
        clickCheckBox(){
            if(this.disable){
                return;
            }
            if(this.value){
                this.$emit("input", false);
                this.$emit('update:value', false);
                this.$emit('checked', false);
            }else{
                this.$emit("input", true);
                this.$emit('update:value', true);
                this.$emit('checked', true);
            }
        }
    }
}
</script>

<style>
:root{
    --primary-color: var(--theme-primary-color, #4c535a) ;
    --disable-color: var(--theme-disable-color, #b2b3b4)
}
</style>
<style scoped>
*{
    margin: 0;
    padding: 0;
}
.mainDiv{
    display: flex;
    vertical-align: middle;
    cursor: pointer;
    width: 100%;
}
.box{
    height: 1.5em;
    width: 1.5em;
    display: inline;
    text-align:center;
    vertical-align: middle;
    background-color: none !important;
}
.svg{
    height: 1.5em;
    width: 1.5em;
}
.label{
    user-select:none;
    display: inline;
    color: var(--theme-text-color);
}

</style>